<template>
  <t-dialog
    header="新建指南"
    :confirmBtn="null"
    :visible.sync="visible"
    :onClose="closeDialog"
    :closeOnOverlayClick="false"
    width="40%"
  >
    <t-form :data="formData" labelWidth="150px"  :rules="rules" @submit="onSubmit">
      <t-form-item label="指南名称"  name="guide_name" >
        <t-input clearable v-model="formData.guide_name" placeholder="请输入"></t-input>
      </t-form-item>
      <t-form-item label="指南年度" name="guide_name">
        <t-date-picker mode="year" clearable/>
      </t-form-item>
      <t-form-item label="指南描述" name="guide_desc">
        <t-textarea
          placeholder="请输入"
        />
      </t-form-item>
      <t-form-item label="申报要求" name="apply_require">
        <t-textarea
          placeholder="请输入"
        />
      </t-form-item>
      <t-form-item label="其他要求" name="other_require">
        <t-textarea
          placeholder="请输入"
        />
      </t-form-item>
      <t-form-item label="申报方式" name="apply_way">
        <t-textarea
          placeholder="请输入"
        />
      </t-form-item>
      <t-form-item label="联系方式" name="contact_way">
        <t-textarea
          placeholder="请输入"
        />
      </t-form-item>
      <t-form-item label="申报时间" name="contact_way">
        <t-date-range-picker />
      </t-form-item>
      <t-form-item label="纸质材料申报时间" name="contact_way">
        <t-date-range-picker />
      </t-form-item>
      <h1>指南方向</h1>
      <t-row style="display:flex;align-items: center;margin-top: 10px" :gutter="10" v-for="(item,index) in formData.guide_directions"
             :key="index">
        <t-col :span="8">
          <t-form-item label="方向名" >
            <t-input clearable v-model="formData.guide_directions[index].direction_name" placeholder="请输入"></t-input>
          </t-form-item>
          <t-form-item label="方向描述" >
            <t-textarea
              v-model="formData.guide_directions[index].direction_desc"
              placeholder="请输入"
            />
          </t-form-item>
        </t-col>
        <t-col :span="2">
          <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
            <t-button theme="primary" @click="addDirection">添加</t-button>
            <t-button theme="danger" v-if="formData.guide_directions.length>1" style="margin-left: 0px;margin-top: 10px" @click="delDirection(index)">删除
            </t-button>
          </div>
        </t-col>
      </t-row>
      <t-form-item style="margin-left: 100px;margin-top: 10px">
        <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
        <t-button theme="default" variant="outline" type="reset">重置</t-button>
      </t-form-item>
    </t-form>

  </t-dialog>
</template>

<script>
export default {
  name: "add-guide",
  data() {
    return {
      visible: true,
      rules: {
        // direction_name: [
        //   {required: true, message: '必填', type: 'error'},
        // ]
      },
      formData: {
        guide_name: "",
        guide_desc: "",
        guide_year: undefined,
        guide_directions: [{
          direction_name: "",
          direction_desc: ""
        }]
      }
    }
  },
  methods: {
    onSubmit({validateResult, firstError}) {
      if (validateResult === true) {
        console.log(this.formData);
      }
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },
    addDirection() {
      this.formData.guide_directions.push({
        "direction_name": "",
        "direction_desc": ""
      })
    },
    delDirection(index) {
      if (this.formData.guide_directions.length <= 1) {
        this.$message.error('至少保留一个');
      } else {
        this.formData.guide_directions.splice(index, 1);
      }

    }
  }
}
</script>

<style scoped>

</style>
